<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :refresh="false" :safeBottom="false">
				<image src="../../static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack" v-if="loginType"></image>
				<div class="big-box">
					<div class="title-box">
						<span class="title-line"></span>
						<div class="input-text">
							<block v-if="loginType == 'registerLogin'">
								<span class="jiu-font30-fff">注册登录</span>
								<span class="jiu-font32-555">未注册手机验证后自动登录</span>
							</block>
							<block v-else-if="loginType == 'passwordLogin'">
								<span class="jiu-font30-fff">密码登录</span>
								<span class="jiu-font32-555">请输入手机账号和密码进行登录</span>
							</block>
						</div>
					</div>

					<div class="input-box">
						<div class="input-item" style="padding: 6.4vw;" :class="[loginType == 'passwordLogin' ? 'p64' : 'p48']" >
							<div class="center">
								<span class="jiu-font28-aaa">+86</span>
								<input type="digit" placeholder="请输入手机号码" placeholder-class="jiu-font28-555"
									v-model="userPhone" maxlength="11" />
							</div>
						</div>
						
						<div class="input-item" style="margin-top: 2.67vw;" v-if="loginType == 'registerLogin'">
							<div class="center">
								<span class="jiu-font28-aaa">验证码</span>
								<input type="digit" placeholder="请输入图形验证码" placeholder-class="jiu-font28-555"
									v-model="code" maxlength="11" />
							</div>
							<image :src="imgCode" mode="heightFix" style="height: 8.53vw;" @tap="getCode"></image>
						</div>
						
						<div class="input-item top267" v-if="loginType == 'registerLogin'">
							<div class="center">
								<span class="jiu-font28-aaa">手机验证</span>
								<input type="digit" placeholder="请输入验证码" placeholder-class="jiu-font28-555"
									v-model="phoneCode" maxlength="4" />
									<span class="jiu-font24-000 send-btn" v-if="loginType == 'registerLogin'"
										@tap="onSendCode">{{ sendText }}</span>
							</div>
						</div>
						
						<div class="input-item top267" style="padding: 6.4vw;" v-else-if="loginType == 'passwordLogin'">
							<div class="center">
								<span class="jiu-font28-aaa">输入密码</span>
								<input type="password" placeholder="请输入密码" placeholder-class="jiu-font28-555"
									v-model="userPassword" />
							</div>
						</div>
						<span class="read-text">
							<image src="../../static/img/xuanzhonqian.png" mode="aspectFill" class="xuanzhon-img"
								v-show="icon == false" @tap="selectIcon"></image>
							<image src="../../static/img/xuanzhonhou.png" mode="aspectFill" class="xuanzhon-img"
								v-show="icon == true" @tap="selectIcon"></image>
							<span class="jiu-font24-555">
								我已阅读并同意
								<label @tap="yhxy">《用户服务协议》</label>
								和
								<label @tap="yszc">
									《隐私政策》
								</label>
							</span>
						</span>
					</div>

					<span v-if="loginType == 'passwordLogin'" class="jiu-font24-555 bottom-text">忘记密码了？<label
							style="color: #FFCE80;" @tap="toReset">点击这里找回密码</label></span>
				</div>


			</ma-refresh>
			<bottom-box slot="footer">
				<div class="bottom-box" style="color: #FFFFFF;">
					<span class="login-btn" v-if="loginType == 'registerLogin'" @tap="toIndex('new')">登录&注册</span>
					<span class="login-btn" v-if="loginType == 'passwordLogin'" @tap="toIndex('old')">登录</span>
				</div>
			</bottom-box>
		</ma-body>
		<u-keyboard mode="number" @change="valChange" v-model="numShow" :show-tips="false" :tooltip="false"
			:mask="false" :dot-enabled="false" @backspace="backspace"></u-keyboard>
		<u-keyboard mode="number" @change="valChange" v-model="codeShow" :show-tips="false" :tooltip="false"
			:mask="false" :dot-enabled="false" @backspace="backspace"></u-keyboard>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginType: '',
				icon: false,
				sendText: '发送',
				userPhone: '',
				timer: null,
				loginTimer: null,
				phoneCode: '',
				numShow: false,
				codeShow: false,
				userPassword: '',
				askCode: null,
				imgCode: {},
				code: '',
				uuid: ''
			}
		},
		onLoad(e) {
			this.askCode = e.askCode || null;
			this.loginType = e.loginType;
			this.getCode();
		},
		methods: {
			toReset() {
				this.$ma.route.resetPassword({
					resetType: 'login'
				})
			},
			inputNumber() {
				uni.hideKeyboard();
				this.numShow = true;
			},
			async toIndex(type) {
				if (!this.icon) return uni.showToast({
					icon: 'none',
					title: '请勾选用户协议与隐私政策'
				})
				
				if(type == 'new'){
					if(this.phoneCode.length == 0) return uni.showToast({
						icon: 'none',
						title: '请先填写验证码'
					})
					let data = {
						phone: this.userPhone,
						phoneCode: this.phoneCode
					};
					let askCode;
					if(this.askCode) {
						askCode = this.askCode;
					}
					this.$u.api.onLogin(data,askCode).then(res=>{
						uni.setStorageSync('access_token',res.access_token);
						this.user.access_token = res.access_token;
						this.$store.dispatch('user/loginSuccess');
						if(res.is_register == 1){
							uni.showToast({
								icon: 'none',
								title: '注册成功',
							})
							setTimeout(()=>{
								this.$ma.route.setPassword({
									phone: this.userPhone
								})
							},1000)
						}else if(res.is_register == 0){
							uni.showToast({
								icon: 'none',
								title: '登录成功',
							})
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/index/index'
								})
							},1000)
						}
					}).catch(err=>{
						this.getCode();
					});
					
				}else if(type == 'old'){
					let data = {
						phone: this.userPhone,
						password: this.userPassword
					};
					let res = await this.$u.api.onLogin(data);
					console.log('54489654654',res);
					uni.setStorageSync('access_token',res.access_token);
					this.user.access_token = res.access_token;
					this.$store.dispatch('user/loginSuccess');
					if(res.is_register == 0){
						setTimeout(()=>{
							if(res.is_set_password == 0){
								uni.showToast({
									icon: 'none',
									title: '注册成功',
								})
								this.$ma.route.setPassword({
									phone: this.userPhone
								})
							}else if(res.is_set_password == 1){
								uni.showToast({
									icon: 'none',
									title: '登录成功',
								})
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						},1000)
					}
				}
				
				
			},
			selectIcon() {
				this.icon = !this.icon;
			},
			async onSendCode() { 
				if(this.$u.test.mobile(this.userPhone) == false){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return;
				}
				
				if(this.code.length == 0){
					uni.showToast({
						icon: 'none',
						title: '请先输入图形验证码！'
					})
					return;
				}
				
				const TIME_COUNT = 60;
				if (this.count > 0 && this.count <= TIME_COUNT) return;
				
				let data = {
					phone: this.userPhone,
					code: this.code,
					uuid: this.uuid
				}
				this.$u.api.onSendCode(data).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '验证码已发送，请注意查收'
					})
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
								this.sendText = `${this.count}秒`;
							} else {
								clearInterval(this.timer);
								this.timer = null;
								this.sendText = '再次发送'
							}
						}, 1000)
					}
				}).catch(err => {
					this.getCode();
					this.code = '';
				})
			},
			clearTime() {
				clearTimeout(this.timer);
			},
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.userPhone += val;
				if (this.userPhone.length >= 11) {
					this.numShow = false
				}
			},
			backspace() {
				// 删除value的最后一个字符
				if (this.userPhone.length) this.userPhone = this.userPhone.substr(0, this.userPhone.length - 1);
			},
			inputCode() {
				uni.hideKeyboard();
				this.codeShow = true;
			},
			yszc(){
				this.$ma.route.yszc()
			},
			yhxy(){
				this.$ma.route.agreement()
			},
			// 获取图片验证码
			async getCode(){
				let res = await this.$u.api.getCode();
				this.imgCode = 'data:image/png;base64,'+ res.img;
				this.uuid = res.uuid;
			}
		},
		destroyed() {
			this.clearTime();
		}
	}
</script>

<style lang="scss">
	input{
		font-size: 3.73vw;
	}
	.jiu-font28-555{
		font-weight: 300;
	}
	.center {
		display: flex;
		align-items: center;
	}

	.bottom-text {
		flex: 1;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding-bottom: 4.27vw;
	}

	.xuanzhon-img {
		width: 6.4vw;
		height: 6.4vw;
		margin-right: 1.07vw;
	}

	.top267 {
		margin-top: 2.67vw;
	}

	.big-box {
		height: 100%;
		background-color: #000000;
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		position: relative;

		.title-box {
			display: flex;
			padding-left: 5.33vw;

			.title-line {
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}

			.input-text {
				display: flex;
				flex-direction: column;
			}
		}

		.input-box {
			margin-top: 12.8vw;
			padding-left: 5.33vw;

			.input-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 4.8vw 5.33vw;
				padding-left: 6.8vw;
				background-color: #1B1B1B;
				border-radius: 12.8vw 0 0 12.8vw;
				font-size: $jiu-font28;
				font-weight: 300;
				color: #FFCE80;

				.jiu-font28-aaa {
					width: 15.5vw;
					margin-right: 4.27vw;
					flex-shrink: 0;
					display: block;
				}

				.send-btn {
					width: 17.07vw;
					line-height: 8.53vw;
					text-align: center;
					border-radius: 5.33vw;
					background-color: #A972FF;
					box-shadow: 0vw 1vw 2vw rgba(71, 12, 114, 0.4800);
					margin-left: 4.27vw;
					flex-shrink: 0;
				}

				.jiu-font28-555 {
					font-weight: 300;
				}
			}
		}

		.read-text {
			margin-top: 3.47vw;
			padding-left: 1.07vw;
			display: flex;
			align-items: center;

			.jiu-font24-555 {
				label {
					color: #FFCE80;
				}
			}
		}

		// .bottom-box{
		// 	position: absolute;
		// 	bottom: 0;
		// 	width: 100%;
		// 	padding: 2.13vw 5.33vw;
		// 	padding-bottom: calc(2.13vw + constant(safe-area-inset-bottom));  /*兼容 IOS&gt;11.2*/
		// 	padding-bottom: calc(2.13vw + env( safe-area-inset-bottom));  /*兼容 IOS&gt;11.2*/
		// 	background-color: #1D1D1A;

		// }
	}

	.login-btn {
		display: block;
		width: 89.33vw;
		line-height: 12.8vw;
		text-align: center;
		background-color: #A972FF;
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.4800);
		border-radius: 6.4vw;
		color: #000000;
		font-size: 3.73vw;
		font-weight: 500;
	}
	.p64{
		padding: 6.4vw !important;
	}
	.p48{
		padding: 4.8vw 6.4vw;
	}
</style>
